import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0305',
  templateUrl: './ex0305.component.html',
  styleUrls: ['./ex0305.component.scss']
})
export class Ex0305Component implements OnInit, AfterViewInit {
  protected cnv: any
  protected ctx: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.cnv = ref.nativeElement
    this.ctx = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // this.draw1(this.ctx)
    this.draw2(this.ctx)
  }

  draw1(ctx): void {
    ctx.beginPath()
    ctx.moveTo(100, 75)
    ctx.arc(this.cnv.width / 2, this.cnv.height / 2, 50, 30 * Math.PI / 180, 120 * Math.PI / 180, false)
    ctx.closePath()
    ctx.strokeStyle = 'HotPink'
    ctx.stroke()
  }

  draw2(ctx): void {
    this.createSector(ctx, this.cnv.width / 2, this.cnv.height / 2, 50, 30, 120)
    ctx.fillStyle = 'HotPink'
    ctx.fill()
  }

  createSector(ctx, x, y, r, angle1, angle2): void {
    ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.arc(x, y, r, angle1 * Math.PI / 180, angle2 * Math.PI / 180, false)
    ctx.closePath()
  }
}
